<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">

		<link rel="stylesheet" href="../../dist/mescroll.min.css">
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				-webkit-touch-callout:none;
				-webkit-user-select:none;
				-webkit-tap-highlight-color:transparent;
			}
			body{background-color: white}
			ul{list-style-type: none}
			a {text-decoration: none;color: #18B4FE;}
			
			/*模拟的标题*/
			.header{
				z-index: 9990;
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 44px;
				line-height: 44px;
				text-align: center;
				border-bottom: 1px solid #eee;
				background-color: white;
			}
			.header .btn-left{
				position: absolute;
				top: 0;
				left: 0;
				padding:12px;
				line-height: 22px;
			}
			.header .btn-right{
				position: absolute;
				top: 0;
				right: 0;
				padding: 0 12px;
			}
			/*说明*/
			.btn-change{
				display: inline-block;
				width: 40%;
				margin: 15px 0 8px 30%;
				padding: 6px 0;
				font-size: 14px;
				text-align: center;
				border: 1px solid #FF6990;
				border-radius: 20px;
				color: #FF6990;
			}
			/*列表*/
			.mescroll{
				position: fixed;
				top: 44px;
				bottom: 0;
				height: auto;
			}
			/*展示上拉加载的数据列表*/
			.data-list li{
				position: relative;
				padding: 10px 8px 10px 120px;
				border-bottom: 1px solid #eee;
			}
			.data-list .pd-img{
				position: absolute;
				left: 18px;
				top: 18px;
				width: 80px;
				height: 80px;
			}
			.data-list .pd-name{
				font-size: 16px;
				line-height: 20px;
				height: 40px;
				overflow: hidden;
			}
			.data-list .pd-price{
				margin-top: 8px;
				color: red;
			}
			.data-list .pd-sold{
				font-size: 12px;
				margin-top: 8px;
				color: gray;
			}
		</style>
	</head>

	<body>
		<!--模拟的标题-->
		<p class="header"><a class="btn-left" href="../index.html">main</a> 满屏加载与锁定滑动</p>
		<!--滑动区域-->
		<div id="mescroll" class="mescroll">
			<p class="btn-change">锁定下拉刷新</p>
			<!--展示上拉加载的数据列表-->
			<ul id="dataList" class="data-list">
				<!--<li>
					<img class="pd-img" src="../res/img/pd1.jpg"/>
					<p class="pd-name">商品标题商品标题商品标题商品标题商品标题商品</p>
					<p class="pd-price">200.00 元</p>
					<p class="pd-sold">已售50件</p>
				</li>-->
			</ul>
		</div>
	</body>
	
	<script src="../../dist/mescroll.min.js" type="text/javascript" charset="utf-8"></script>
	<!--mescroll本身不依赖jq,这里为了模拟发送ajax请求-->
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
		$(function(){
			//创建MeScroll对象,内部已默认开启下拉刷新,自动执行up.callback,重置列表数据;
			var mescroll = new MeScroll("mescroll", {
				up: {
					page:{size:1},//每次加载1条数据,模拟loadFull
					loadFull: {
						use: true, //列表数据过少,是否自动加载下一页,直到满屏或者无更多数据为止;默认false
						delay: 500 //延时执行的毫秒数; 延时是为了保证列表数据或占位的图片都已初始化完成,且下拉刷新上拉加载中区域动画已执行完毕;
					},
					callback: getListData, //上拉回调,此处可简写; 相当于 callback: function (page) { getListData(page); }
					isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
					clearEmptyId: "dataList", //1.下拉刷新时会自动先清空此列表,再加入数据; 2.无任何数据时会在此列表自动提示空
					toTop:{ //配置回到顶部按钮
						src : "../res/img/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
						//offset : 1000
					},
					lazyLoad: {
			        	use: true // 是否开启懒加载,默认false
			        }
				}
			});
			
			/*联网加载列表数据  page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
			function getListData(page){
				//联网加载数据
				getListDataFromNet(page.num, page.size, function(curPageData){
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
					console.log("page.num="+page.num+", page.size="+page.size+", curPageData.length="+curPageData.length);
					
					//方法一(推荐): 后台接口有返回列表的总页数 totalPage
					//mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
					
					//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
					//mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
					
					//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
					//mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)
					
					//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据,如果传了hasNext,则翻到第二页即可显示无更多数据.
					mescroll.endSuccess(curPageData.length);
					
					//提示:curPageData.length必传的原因:
					// 1.判断是否有下一页的首要依据: 当传的值小于page.size时,则一定会认为无更多数据.
					// 2.比传入的totalPage, totalSize, hasNext具有更高的判断优先级
					// 3.使配置的noMoreSize生效
					
					//设置列表数据,因为配置了emptyClearId,第一页会清空dataList的数据,所以setListData应该写在最后;
					setListData(curPageData);
				}, function(){
					//联网失败的回调,隐藏下拉刷新和上拉加载的状态;
	                mescroll.endErr();
				});
			}
			
			/*设置列表数据*/
			function setListData(curPageData){
				var listDom=document.getElementById("dataList");
				for (var i = 0; i < curPageData.length; i++) {
					var pd=curPageData[i];
					
					var str='<img class="pd-img" src="../res/img/loading-sq.png" imgurl="'+pd.pdImg+'"/>';
					str+='<p class="pd-name">'+pd.pdName+'</p>';
					str+='<p class="pd-price">'+pd.pdPrice+' 元</p>';
					str+='<p class="pd-sold">已售'+pd.pdSold+'件</p>';
					
					var liDom=document.createElement("li");
					liDom.innerHTML=str;
					listDom.appendChild(liDom);
				}
			}
			
			var dataTag=1;
			$(".btn-change").click(function(){
				console.log("dataTag="+dataTag);
				switch (dataTag){
					case 1://锁定下拉刷新
						mescroll.lockDownScroll(true);
						dataTag=2;
						$(this).text("解锁下拉刷新");
						break;
					case 2://解锁下拉刷新
						mescroll.lockDownScroll(false);
						dataTag=3;
						$(this).text("锁定上拉加载");
						break;
					case 3://锁定上拉加载
						mescroll.lockUpScroll(true);
						dataTag=4;
						$(this).text("解锁上拉加载");
						break;
					case 4://解锁上拉加载
						mescroll.lockUpScroll(false);
						dataTag=1;
						$(this).text("锁定下拉刷新");
						break;
				}
			});
			
			/*联网加载列表数据
			 在您的实际项目中,请参考官方写法: http://www.mescroll.com/api.html#tagUpCallback
			 请忽略getListDataFromNet的逻辑,这里仅仅是在本地模拟分页数据,本地演示用
			 实际项目以您服务器接口返回的数据为准,无需本地处理分页.
			 * */
			function getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {
				//延时一秒,模拟联网
                setTimeout(function () {
                	$.ajax({
		                type: 'GET',
		                url: '../res/pdlist1.json',
//		                url: '../res/pdlist1.json?num='+pageNum+"&size="+pageSize,
		                dataType: 'json',
		                success: function(data){
		                	//模拟分页数据
		                	var listData=[];
							for (var i = (pageNum-1)*pageSize; i < pageNum*pageSize; i++) {
			            		if(i==data.length) break;
			            		listData.push(data[i]);
			            	}
		                	successCallback(listData);
		                },
		                error: errorCallback
		            });
                },500)
			}
			
		});
	</script>

</html>